<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>活动报名管理 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #3b82f6;
    }
    
    /* 活动信息头部 */
    .event-header {
      background-color: white;
      padding: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .event-title {
      font-size: 17px;
      font-weight: 600;
      margin: 0 0 8px 0;
    }
    
    .event-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 13px;
      color: #666;
    }
    
    .event-meta i {
      margin-right: 4px;
      color: #999;
    }
    
    .participation-stats {
      display: flex;
      justify-content: space-around;
      background-color: white;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }
    
    .stat-box {
      text-align: center;
    }
    
    .stat-box-value {
      font-size: 18px;
      font-weight: 700;
      color: #3b82f6;
    }
    
    .stat-box-label {
      font-size: 12px;
      color: #999;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #3b82f6;
      color: white;
    }
    
    /* 通用用户页面样式 */
    .user-page {
      display: none;
    }
    
    .user-page.active {
      display: block;
    }
    
    /* 筛选栏 */
    .filter-bar {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
      gap: 10px;
    }
    
    .filter-item {
      flex: 1;
      padding: 6px 0;
      text-align: center;
      font-size: 14px;
      position: relative;
    }
    
    .filter-item::after {
      content: "\f078";
      font-family: "FontAwesome";
      font-size: 12px;
      margin-left: 5px;
      color: #999;
    }
    
    /* 报名状态标签 */
    .status-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .status-confirmed {
      background-color: #dcfce7;
      color: #16a34a;
    }
    
    .status-pending {
      background-color: #fef3c7;
      color: #d97706;
    }
    
    .status-canceled {
      background-color: #fee2e2;
      color: #dc2626;
    }
    
    /* 操作按钮 */
    .action-btn {
      background: none;
      border: none;
      color: #666;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .action-btn:hover {
      background-color: #f5f7fa;
    }
    
    .action-btn.message {
      color: #3b82f6;
    }
    
    .action-btn.checkin {
      color: #10b981;
    }
    
    .action-btn.remove {
      color: #ef4444;
    }
    
    /* 样式1 - 详细列表视图 */
    .detailed-list {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .detailed-item {
      background-color: white;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .user-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .user-info {
      display: flex;
      align-items: center;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .user-name {
      font-weight: 500;
      font-size: 15px;
      margin: 0;
    }
    
    .user-role {
      font-size: 12px;
      color: #999;
    }
    
    .user-details {
      font-size: 13px;
      color: #666;
      display: flex;
      justify-content: space-between;
      padding-top: 8px;
      border-top: 1px solid #f5f7fa;
    }
    
    .detail-item {
      display: flex;
      align-items: center;
    }
    
    .detail-item i {
      margin-right: 4px;
      color: #999;
      font-size: 12px;
    }
    
    .user-actions {
      display: flex;
      gap: 5px;
      margin-top: 8px;
    }
    
    /* 样式2 - 紧凑网格视图 */
    .compact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      padding: 15px;
    }
    
    .grid-user {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .grid-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 6px;
      position: relative;
    }
    
    .grid-avatar .status-indicator {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid white;
    }
    
    .status-online {
      background-color: #10b981;
    }
    
    .status-offline {
      background-color: #d1d5db;
    }
    
    .grid-name {
      font-size: 13px;
      font-weight: 500;
      margin: 0 0 3px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 90px;
    }
    
    .grid-status {
      font-size: 11px;
      padding: 1px 6px;
      border-radius: 4px;
    }
    
    /* 样式3 - 标签分组视图 */
    .tag-group-view {
      margin-bottom: 15px;
    }
    
    .tag-section {
      margin-bottom: 15px;
    }
    
    .tag-header {
      padding: 10px 15px;
      font-size: 14px;
      font-weight: 500;
      color: #666;
      background-color: #f5f7fa;
      display: flex;
      justify-content: space-between;
    }
    
    .tag-count {
      background-color: #e5e7eb;
      color: #6b7280;
      font-size: 12px;
      padding: 1px 6px;
      border-radius: 10px;
    }
    
    .tag-content {
      background-color: white;
    }
    
    .tag-user {
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .tag-user-info {
      display: flex;
      align-items: center;
    }
    
    .tag-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .tag-user-name {
      font-size: 14px;
      font-weight: 500;
      margin: 0;
    }
    
    .tag-user-meta {
      font-size: 12px;
      color: #999;
    }
    
    /* 样式4 - 签到视图 */
    .checkin-view {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .checkin-user {
      background-color: white;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .checkin-info {
      display: flex;
      align-items: center;
    }
    
    .checkin-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .checkin-details {
      min-width: 0;
    }
    
    .checkin-name {
      font-size: 15px;
      font-weight: 500;
      margin: 0 0 3px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .checkin-time {
      font-size: 12px;
      color: #999;
    }
    
    .checkin-actions {
      display: flex;
      gap: 8px;
    }
    
    .checkin-status {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #666;
    }
    
    .checkin-status i {
      margin-right: 5px;
      font-size: 14px;
    }
    
    .checked-in i {
      color: #10b981;
    }
    
    .not-checked-in i {
      color: #94a3b8;
    }
    
    /* 批量操作按钮 */
    .batch-actions {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 90;
    }
    
    .batch-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 3px 10px rgba(0,0,0,0.15);
      text-decoration: none;
    }
    
    .primary-btn {
      background-color: #3b82f6;
    }
    
    .secondary-btn {
      background-color: #10b981;
    }
    
    .danger-btn {
      background-color: #ef4444;
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      color: #cbd5e1;
    }
    
    .empty-text {
      font-size: 16px;
      margin: 0 0 10px 0;
    }
    
    .empty-subtext {
      font-size: 14px;
      color: #94a3b8;
      margin: 0 0 20px 0;
    }
    
    .empty-btn {
      padding: 8px 16px;
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 批量操作按钮 -->
  <div class="batch-actions">
    <a href="#" class="batch-btn primary-btn" id="exportBtn">
      <i class="fa fa-download"></i>
    </a>
    <a href="#" class="batch-btn secondary-btn" id="checkinAllBtn">
      <i class="fa fa-check"></i>
    </a>
    <a href="#" class="batch-btn danger-btn" id="messageBtn">
      <i class="fa fa-comments"></i>
    </a>
  </div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">报名用户管理</h1>
    <a href="#" class="nav-btn primary" id="searchBtn">
      <i class="fa fa-search"></i>
    </a>
  </nav>
  
  <!-- 活动信息头部 -->
  <div class="event-header">
    <h2 class="event-title">2023前端技术交流会</h2>
    <div class="event-meta">
      <span><i class="fa fa-calendar"></i> 6月15日 14:00</span>
      <span><i class="fa fa-map-marker"></i> 科技大厦B座</span>
    </div>
  </div>
  
  <!-- 参与统计 -->
  <div class="participation-stats">
    <div class="stat-box">
      <div class="stat-box-value">32</div>
      <div class="stat-box-label">总报名</div>
    </div>
    <div class="stat-box">
      <div class="stat-box-value">18</div>
      <div class="stat-box-label">已签到</div>
    </div>
    <div class="stat-box">
      <div class="stat-box-value">14</div>
      <div class="stat-box-label">未签到</div>
    </div>
    <div class="stat-box">
      <div class="stat-box-value">3</div>
      <div class="stat-box-label">已取消</div>
    </div>
  </div>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="detailed">详细列表</div>
      <div class="style-tab" data-style="grid">紧凑网格</div>
      <div class="style-tab" data-style="tag">状态分组</div>
      <div class="style-tab" data-style="checkin">签到管理</div>
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-item">全部状态</div>
    <div class="filter-item">报名时间</div>
    <div class="filter-item">按姓名</div>
  </div>
  
  <!-- 样式1 - 详细列表视图 -->
  <div class="user-page active" id="detailed">
    <ul class="detailed-list">
      <li class="detailed-item">
        <div class="user-header">
          <div class="user-info">
            <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="user-avatar">
            <div>
              <p class="user-name">张开发</p>
              <div class="user-role">前端工程师 @科技公司</div>
            </div>
          </div>
          <span class="status-tag status-confirmed">已确认</span>
        </div>
        <div class="user-details">
          <div class="detail-item"><i class="fa fa-clock-o"></i> 6月10日报名</div>
          <div class="detail-item"><i class="fa fa-mobile"></i> 138****5678</div>
        </div>
        <div class="user-actions">
          <button class="action-btn message"><i class="fa fa-comment"></i> 消息</button>
          <button class="action-btn checkin"><i class="fa fa-check"></i> 签到</button>
          <button class="action-btn remove"><i class="fa fa-trash"></i> 移除</button>
        </div>
      </li>
      
      <li class="detailed-item">
        <div class="user-header">
          <div class="user-info">
            <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="user-avatar">
            <div>
              <p class="user-name">李设计</p>
              <div class="user-role">UI设计师 @创意工作室</div>
            </div>
          </div>
          <span class="status-tag status-confirmed">已确认</span>
        </div>
        <div class="user-details">
          <div class="detail-item"><i class="fa fa-clock-o"></i> 6月9日报名</div>
          <div class="detail-item"><i class="fa fa-mobile"></i> 139****8765</div>
        </div>
        <div class="user-actions">
          <button class="action-btn message"><i class="fa fa-comment"></i> 消息</button>
          <button class="action-btn checkin"><i class="fa fa-check"></i> 签到</button>
          <button class="action-btn remove"><i class="fa fa-trash"></i> 移除</button>
        </div>
      </li>
      
      <li class="detailed-item">
        <div class="user-header">
          <div class="user-info">
            <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="user-avatar">
            <div>
              <p class="user-name">王产品</p>
              <div class="user-role">产品经理 @互联网公司</div>
            </div>
          </div>
          <span class="status-tag status-pending">待确认</span>
        </div>
        <div class="user-details">
          <div class="detail-item"><i class="fa fa-clock-o"></i> 今天 09:15报名</div>
          <div class="detail-item"><i class="fa fa-mobile"></i> 137****6543</div>
        </div>
        <div class="user-actions">
          <button class="action-btn message"><i class="fa fa-comment"></i> 消息</button>
          <button class="action-btn checkin"><i class="fa fa-check"></i> 确认</button>
          <button class="action-btn remove"><i class="fa fa-trash"></i> 拒绝</button>
        </div>
      </li>
      
      <li class="detailed-item">
        <div class="user-header">
          <div class="user-info">
            <img src="https://picsum.photos/seed/user4/100/100" alt="用户头像" class="user-avatar">
            <div>
              <p class="user-name">赵测试</p>
              <div class="user-role">测试工程师 @软件公司</div>
            </div>
          </div>
          <span class="status-tag status-canceled">已取消</span>
        </div>
        <div class="user-details">
          <div class="detail-item"><i class="fa fa-clock-o"></i> 6月8日报名</div>
          <div class="detail-item"><i class="fa fa-mobile"></i> 136****4321</div>
        </div>
        <div class="user-actions">
          <button class="action-btn message"><i class="fa fa-comment"></i> 消息</button>
          <button class="action-btn checkin"><i class="fa fa-refresh"></i> 恢复</button>
          <button class="action-btn remove"><i class="fa fa-trash"></i> 删除</button>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 样式2 - 紧凑网格视图 -->
  <div class="user-page" id="grid">
    <div class="compact-grid">
      <div class="grid-user">
        <div class="grid-avatar">
          <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="grid-avatar">
          <span class="status-indicator status-online"></span>
        </div>
        <p class="grid-name">张开发</p>
        <span class="grid-status status-confirmed">已确认</span>
      </div>
      
      <div class="grid-user">
        <div class="grid-avatar">
          <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="grid-avatar">
          <span class="status-indicator status-online"></span>
        </div>
        <p class="grid-name">李设计</p>
        <span class="grid-status status-confirmed">已确认</span>
      </div>
      
      <div class="grid-user">
        <div class="grid-avatar">
          <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="grid-avatar">
          <span class="status-indicator status-offline"></span>
        </div>
        <p class="grid-name">王产品</p>
        <span class="grid-status status-pending">待确认</span>
      </div>
      
      <div class="grid-user">
        <div class="grid-avatar">
          <img src="https://picsum.photos/seed/user4/100/100" alt="用户头像" class="grid-avatar">
          <span class="status-indicator status-offline"></span>
        </div>
        <p class="grid-name">赵测试</p>
        <span class="grid-status status-canceled">已取消</span>
      </div>
      
      <div class="grid-user">
        <div class="grid-avatar">
          <img src="https://picsum.photos/seed/user5/100/100" alt="用户头像" class="grid-avatar">
          <span class="status-indicator status-online"></span>
        </div>
        <p class="grid-name">陈后端</p>
        <span class="grid-status status-confirmed">已确认</span>
      </div>
      
      <div class="grid-user">
        <div class="grid-avatar">
          <img src="https://picsum.photos/seed/user6/100/100" alt="用户头像" class="grid-avatar">
          <span class="status-indicator status-online"></span>
        </div>
        <p class="grid-name">刘运维</p>
        <span class="grid-status status-confirmed">已确认</span>
      </div>
      
      <div class="grid-user">
        <div class="grid-avatar">
          <img src="https://picsum.photos/seed/user7/100/100" alt="用户头像" class="grid-avatar">
          <span class="status-indicator status-offline"></span>
        </div>
        <p class="grid-name">孙架构</p>
        <span class="grid-status status-pending">待确认</span>
      </div>
      
      <div class="grid-user">
        <div class="grid-avatar">
          <img src="https://picsum.photos/seed/user8/100/100" alt="用户头像" class="grid-avatar">
          <span class="status-indicator status-offline"></span>
        </div>
        <p class="grid-name">周数据</p>
        <span class="grid-status status-confirmed">已确认</span>
      </div>
      
      <div class="grid-user">
        <div class="grid-avatar">
          <img src="https://picsum.photos/seed/user9/100/100" alt="用户头像" class="grid-avatar">
          <span class="status-indicator status-offline"></span>
        </div>
        <p class="grid-name">吴安全</p>
        <span class="grid-status status-canceled">已取消</span>
      </div>
    </div>
  </div>
  
  <!-- 样式3 - 标签分组视图 -->
  <div class="user-page" id="tag">
    <div class="tag-group-view">
      <!-- 已确认分组 -->
      <div class="tag-section">
        <div class="tag-header">
          <span>已确认</span>
          <span class="tag-count">26</span>
        </div>
        <div class="tag-content">
          <div class="tag-user">
            <div class="tag-user-info">
              <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="tag-avatar">
              <div>
                <p class="tag-user-name">张开发</p>
                <div class="tag-user-meta">前端工程师 · 6月10日报名</div>
              </div>
            </div>
            <button class="action-btn checkin"><i class="fa fa-check"></i> 签到</button>
          </div>
          
          <div class="tag-user">
            <div class="tag-user-info">
              <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="tag-avatar">
              <div>
                <p class="tag-user-name">李设计</p>
                <div class="tag-user-meta">UI设计师 · 6月9日报名</div>
              </div>
            </div>
            <button class="action-btn checkin"><i class="fa fa-check"></i> 签到</button>
          </div>
          
          <div class="tag-user">
            <div class="tag-user-info">
              <img src="https://picsum.photos/seed/user5/100/100" alt="用户头像" class="tag-avatar">
              <div>
                <p class="tag-user-name">陈后端</p>
                <div class="tag-user-meta">后端工程师 · 6月8日报名</div>
              </div>
            </div>
            <button class="action-btn checkin"><i class="fa fa-check"></i> 签到</button>
          </div>
        </div>
      </div>
      
      <!-- 待确认分组 -->
      <div class="tag-section">
        <div class="tag-header">
          <span>待确认</span>
          <span class="tag-count">3</span>
        </div>
        <div class="tag-content">
          <div class="tag-user">
            <div class="tag-user-info">
              <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="tag-avatar">
              <div>
                <p class="tag-user-name">王产品</p>
                <div class="tag-user-meta">产品经理 · 今天报名</div>
              </div>
            </div>
            <div>
              <button class="action-btn checkin"><i class="fa fa-check"></i> 确认</button>
              <button class="action-btn remove"><i class="fa fa-times"></i> 拒绝</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 已取消分组 -->
      <div class="tag-section">
        <div class="tag-header">
          <span>已取消</span>
          <span class="tag-count">3</span>
        </div>
        <div class="tag-content">
          <div class="tag-user">
            <div class="tag-user-info">
              <img src="https://picsum.photos/seed/user4/100/100" alt="用户头像" class="tag-avatar">
              <div>
                <p class="tag-user-name">赵测试</p>
                <div class="tag-user-meta">测试工程师 · 6月8日取消</div>
              </div>
            </div>
            <button class="action-btn message"><i class="fa fa-refresh"></i> 恢复</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式4 - 签到视图 -->
  <div class="user-page" id="checkin">
    <ul class="checkin-view">
      <li class="checkin-user">
        <div class="checkin-info">
          <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="checkin-avatar">
          <div class="checkin-details">
            <p class="checkin-name">张开发</p>
            <div class="checkin-time">前端工程师 · 6月10日报名</div>
          </div>
        </div>
        <div class="checkin-actions">
          <div class="checkin-status checked-in">
            <i class="fa fa-check-circle"></i> 已签到
          </div>
          <button class="action-btn message"><i class="fa fa-comment"></i></button>
        </div>
      </li>
      
      <li class="checkin-user">
        <div class="checkin-info">
          <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="checkin-avatar">
          <div class="checkin-details">
            <p class="checkin-name">李设计</p>
            <div class="checkin-time">UI设计师 · 6月9日报名</div>
          </div>
        </div>
        <div class="checkin-actions">
          <div class="checkin-status checked-in">
            <i class="fa fa-check-circle"></i> 已签到
          </div>
          <button class="action-btn message"><i class="fa fa-comment"></i></button>
        </div>
      </li>
      
      <li class="checkin-user">
        <div class="checkin-info">
          <img src="https://picsum.photos/seed/user5/100/100" alt="用户头像" class="checkin-avatar">
          <div class="checkin-details">
            <p class="checkin-name">陈后端</p>
            <div class="checkin-time">后端工程师 · 6月8日报名</div>
          </div>
        </div>
        <div class="checkin-actions">
          <div class="checkin-status not-checked-in">
            <i class="fa fa-clock-o"></i> 未签到
          </div>
          <button class="action-btn checkin"><i class="fa fa-check"></i></button>
        </div>
      </li>
      
      <li class="checkin-user">
        <div class="checkin-info">
          <img src="https://picsum.photos/seed/user6/100/100" alt="用户头像" class="checkin-avatar">
          <div class="checkin-details">
            <p class="checkin-name">刘运维</p>
            <div class="checkin-time">运维工程师 · 6月7日报名</div>
          </div>
        </div>
        <div class="checkin-actions">
          <div class="checkin-status not-checked-in">
            <i class="fa fa-clock-o"></i> 未签到
          </div>
          <button class="action-btn checkin"><i class="fa fa-check"></i></button>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 空状态示例 (默认隐藏) -->
  <div class="empty-state" style="display: none;">
    <div class="empty-icon">
      <i class="fa fa-users"></i>
    </div>
    <h3 class="empty-text">暂无报名用户</h3>
    <p class="empty-subtext">目前还没有用户报名该活动</p>
    <button class="empty-btn">分享活动</button>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const userPages = document.querySelectorAll('.user-page');
    const filterItems = document.querySelectorAll('.filter-item');
    const actionBtns = document.querySelectorAll('.action-btn');
    const backBtn = document.getElementById('backBtn');
    const searchBtn = document.getElementById('searchBtn');
    const exportBtn = document.getElementById('exportBtn');
    const checkinAllBtn = document.getElementById('checkinAllBtn');
    const messageBtn = document.getElementById('messageBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        userPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 筛选项点击事件
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        showToast(`筛选：${this.textContent}`);
        // 实际应用中可打开筛选弹窗
      });
    });
    
    // 操作按钮点击事件
    actionBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        let action;
        if (this.classList.contains('message')) action = '发送消息给';
        else if (this.classList.contains('checkin')) action = this.textContent.includes('确认') ? '确认' : '签到';
        else if (this.classList.contains('remove')) action = this.textContent.includes('拒绝') ? '拒绝' : '移除';
        
        const userNameElement = this.closest('.detailed-item, .tag-user, .checkin-user')
          .querySelector('.user-name, .tag-user-name, .checkin-name');
        const userName = userNameElement.textContent;
        
        if (action === '移除' || action === '拒绝') {
          if (confirm(`确定要${action}${userName}的报名吗？`)) {
            showToast(`${action}成功`);
          }
        } else {
          showToast(`${action}${userName}`);
        }
      });
    });
    
    // 网格用户点击事件
    const gridUsers = document.querySelectorAll('.grid-user');
    gridUsers.forEach(user => {
      user.addEventListener('click', function() {
        const userName = this.querySelector('.grid-name').textContent;
        showToast(`查看${userName}的详情`);
      });
    });
    
    // 批量操作按钮
    exportBtn.addEventListener('click', function() {
      showToast('导出报名列表');
    });
    
    checkinAllBtn.addEventListener('click', function() {
      showToast('一键签到所有用户');
    });
    
    messageBtn.addEventListener('click', function() {
      showToast('群发消息给所有报名用户');
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回活动详情');
      // 实际应用中可以使用history.back()
    });
    
    // 搜索按钮点击事件
    searchBtn.addEventListener('click', function() {
      showToast('搜索报名用户');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
